import React from 'react';
import styled from '@emotion/styled';
import { keyframes } from '@emotion/react';

const CssInJs = () => {
  return (
    <Main>
      <p>@emotion/core @emotion/styled</p>
      <p>
        npm run eject <br />
        "presets": @emotion/babel-preset-css-prop
        <br />
        其实并不喜欢用css的方式去写样式，因为一方面需要eject，另一方面styled的写法更加优雅，完全可以满足日常开发需要
      </p>
      <Button color="tomato">按钮</Button>

      <Box>Lorem ipsum dolor Molestiae, magnam!</Box>
    </Main>
  );
};

const Main = styled.div`
  background: green;
  height: 100%;

  p {
    margin: 0;
  }
`;

// porps 传参 可以自定义样式
const Button = styled.button`
  color: ${props => props.color || 'red'};
`;

const move = keyframes`
  0% {
    background: skyblue;
    left: 0;
    top:0
  }

  100% {
    background: tomato;
    left: 600px;
    top: 300px
  }
`;

const Box = styled.p`
  width: 100px;
  height: 100px;
  position: absolute;
  animation: ${move} 2s ease infinite alternate;
`;

export default CssInJs;
